body {
	margin: 0px;
	padding: 0px;
	background: #003DA5;
}

@font-face {
	font-family: myFavFont;
	src: url(GildaDisplay-Regular.ttf);
}

#top {
	margin: 1.5%;
	padding: 0px;
	border: 5px #10181E solid;
	background: white;
}

.top {
	margin: 1.5%;
	padding: 0px;
	border: 5px #10181E solid;
	border-radius: 15px;
	background: white;
}

.title {
	margin: 0px;
	padding: 5px;
	color: black;
	text-align: center;
	vertical-align: center;
	font-family: open sans, times, arial;
	font-weight: bold;
	font-style: normal;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.title2 {
	margin: 0px;
	padding: 25px 5px 25px 5px;
	font: arial, times;
	color: black;
	text-align: center;
	font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.title3 {
	margin: 0px;
	padding: 5px;
	font: 150% open sans, times, arial;
	color: black;
	text-align: center;
}

.menubar {
	font-size: 175%;
	text-align: center;
	color: white;
}

.menubar a {
	color: white;
	text-decoration: none;
}

.menubar a:hover {
	color: yellow;
	text-decoration: underline;
}

.center-table {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

@media (max-width: 480px) {
	.center-table {
		width: 100%;
	}

	.center-table tr {
		display: block;
		margin-bottom: .75rem;
	}

	.center-table td {
		display: block;
		width: 100% !important;
	}

	/* Labels read naturally above inputs */
	.center-table td:first-child {
		text-align: left !important;
		white-space: normal;
		padding: 0 0 .25rem 0;
	}
}

#mainbody {
	margin: 1.5%;
	padding: 0;
	border: 5px #10181E solid;
	border-radius: 15px;
	background-color: white;
}

#mainbodygray {
	margin: 1.5%;
	padding: 0;
	border: 5px #10181E solid;
	background-color: #C3C6C5;
}

#mainbody a {
	color: #003DA5;
	text-decoration: none;
}

#mainbody .decade-menu a {
	color: #003DA5;
}

#mainbody a:hover {
	color: #003DA5;
	text-decoration: underline;
}

#mainbody .decade-menu a:hover {
	color: #003DA5;
	text-decoration: underline;
}

/* Let class="mainbody" inherit the same styling as #mainbody */
.mainbody {
	margin: 1.5%;
	padding: 0;
	border: 5px #10181E solid;
	border-radius: 15px;
	background-color: white;
}

.mainbody a {
	color: #003DA5;
	text-decoration: none;
}

.mainbody a:hover {
	color: #003DA5;
	text-decoration: underline;
}

.container {
	display: flex;
	/* Use Flexbox for layout */
	margin: 1.5%;
	padding: 0;
	border: 0;
	border-radius: 15px;
	background-color: transparent;
}

.left-panel,
.right-panel {
	flex: 1;
	/* Each panel takes equal space */
	padding: 20px;
	box-sizing: border-box;
	/* Include padding in the element's total width and height */
}

.left-panel {
	background-color: #f0f0f0;
	border: 5px solid #10181E;
	border-right: 2.5px solid #10181E;
	border-radius: 15px;
}

.right-panel {
	background-color: #C3C6C5;
	border: 5px solid #10181E;
	border-left: 2.5px solid #10181E;
	border-radius: 15px;
}

.logo-left {
	border: 0;
	margin-right: 15px;
	width: 10%;
	min-width: 40px;
	float: left;
}

.logo-center {
	border: 0;
	margin-left: 15px;
	margin-right: 15px;
	width: 3%;
	min-width: 40px;
	float: none;
}

.logo-right {
	border: 0;
	margin-left: 15px;
	width: 15%;
	min-width: 40px;
	float: right;
}

@media screen and (max-width: 768px) {

	.logo-left,
	.logo-right {
		width: 15%;
		display: block;
		margin: 0 auto 10px;
		float: none;
	}

	.logo-center {
		width: 6%;
		display: block;
		margin: 0 auto 10px;
		float: none;
	}
}



.odd {
	background-color: lightgray;
}

.black {
	color: #C3C6C5;
}

hr {
	border: 0;
	height: 1px;
	background-color: #003DA5;
	/* your school blue */
	margin: 2em auto;
}

.bodyh1 {
	margin: 0px;
	padding: .2em;
	font: bold 250% open sans, times, arial;
	color: black;
	text-align: left;
	text-decoration: underline;
}

.bodyh2 {
	margin: 0px;
	padding: .1em;
	font: bold 175% open sans, times, arial;
	color: black;
	text-align: center;
}

.bodyh2a {
	margin: 0px;
	padding: .1em;
	font: bold 275% open sans, times, arial;
	color: black;
	text-align: center;
}

.bodyh2b {
	margin: 0px;
	padding: .1em;
	font: normal 175% open sans, times, arial;
	color: black;
	text-align: center;
}

.bodyh3 {
	margin: 0px;
	padding: .1em;
	font: bold 150% open sans, times, arial;
	color: black;
	text-align: left;
}

.bodyh4 {
	margin: 0px;
	padding: .1em;
	font: bold 150% open sans, times, arial;
	color: black;
	text-align: center;
}

.thoughtq {
	margin: 0px 10%;
	padding: .1em;
	font: bold 150% arial, times;
	color: black;
	text-align: center;
}

.heading1 {
	margin: 0px 1em;
	padding: .2em;
	font: bold 175% open sans, times, arial;
	color: black;
	text-align: left;
}

.headingcolor {
	margin: .2em .8em .2em .8em;
	border: 2px #000000 solid;
	padding: .2em;
	background: #003DA5;
	font: bold 200% open sans, times, arial;
	color: white;
	text-align: center;
}

.headingcolorj {
	margin: .2em .8em .2em .8em;
	border: 2px #000000 solid;
	padding: .2em;
	background: #002366;
	font: bold 200% open sans, times, arial;
	color: white;
	text-align: center;
}

.text {
	margin: 0px 1em;
	padding: .2em .2em 1em .2em;
	font: 150% arial, times;
	color: black;
}

.textcenter {
	margin: 0px 1em;
	padding: .2em .2em 1em .2em;
	font: 150% arial, times;
	color: black;
	text-align: center;
}


.flex-container-center {
	display: flex;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0 0 4rem 0;
}

.flex-item-list {
	width: fit-content;
	padding: 1rem;
	color: black;
	background: white;
	border: 5px solid #10181E;
	border-radius: 15px;
}

.flex-item-list ol {
  margin: 0;
  padding-left: 4.5rem;
}

.flex-item-list li {
	font-size: clamp(1.2rem, 2vw, 1.75rem);
	line-height: 1.4;
}


.cards {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	
}

.card {
	display: flex;
	flex-direction: column;
	flex: 1 1 250px;
	border: 3px solid black;
	border-radius: 15px;
	padding: 1rem;
	text-align: center;
}

.cta {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
	border: 2px solid black;
	border-radius: 15px;
	background-color: lightgray;
}

.flex-container-funfacts {
	margin: 1.5%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2rem;
	background: transparent;
	border: 0;
	padding: 0 0 4rem 0;
}

.flex-item-funfacts {
	display: flex;
	flex-direction: column;
	flex: 1 1 250px;
	padding: 0.5rem;
	color: black;
	background: white;
	border: 5px solid #10181E;
	border-radius: 15px;
	align-items: top;
	text-align: center;
}

.flex-item-funfacts a {
	text-decoration: none;
}

.flex-item-funfacts h2 {
	text-align: center;
	font-size: clamp(1.2rem, 2vw, 1.75rem);
	padding: 0;
	margin: 0;
}

.flex-item-funfacts li {
	font-size: clamp(1rem, 1vw, 1.5rem);
	line-height: 1.2;
	text-align: left;
}

.space-sm {
	height: 0.75rem;
}

.space-md {
	height: 1.25rem;
}

.space-lg {
	height: 2rem;
}

.space-xlg {
	height: 4rem;
}

/* Define the animation */
@keyframes flash {
  0% {
    opacity: 1; /* Text is fully visible at the start */
  }
  50% {
    opacity: 0; /* Text is fully transparent halfway through */
  }
  100% {
    opacity: 1; /* Text is fully visible at the end of the cycle */
  }
}

/* Apply the animation to a class */
.flashing-text {
  animation-name: flash;
  animation-duration: 2s; /* The animation lasts 1 second */
  animation-timing-function: linear;
  animation-iteration-count: infinite; /* The animation repeats forever */
}



.textright {
	margin: 0px 1em;
	padding: .2em .2em 1em .2em;
	font: 150% arial, times;
	color: black;
	text-align: right;
}

.formtext {
	margin: 0px 1em;
	padding: .2em .2em 1em .2em;
	font: 150% arial, times;
	color: black;
	text-align: right;
}

.quote {
	margin: 0px 1em;
	padding: .2em .2em .2em 2em;
	font: 150% arial, times;
	color: black;
	font-style: italic;
}

.listindented {
	margin: 0px 0px;
	padding: 0em 0em 0em 4em;
}

.textindented {
	margin: 0px 0em;
	padding: 0em 1em 1em 0.5em;
	font: 150% arial, times;
	color: black;
}

.textindented2 {
	margin: 0px;
	padding: 0em 0em 0em 8em;
	font: 150% arial, times;
	color: black;
}

.textinput {
	font: 100% arial, times;
	color: black;
	text-align: center;
}

.texttable {
	font: 150% arial, times;
	color: black;
	text-align: left;
	border: 1px solid black;
}

.texttable a {
	color: #003DA5;
	text-decoration: none;
}

.texttable a:hover {
	color: #003DA5;
	text-decoration: underline;
}

.copyright {
	margin: 2px;
	padding: .3em 0px;
	text-align: center;
	font: normal x-small arial, times;
}

/* === Class Links Pop-up Menus (lightweight, uses existing look) === */

/* Grid of decade cells; reuses your .center-table width */
.decade-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5em 1em;
	width: 80%;
}

/* Each decade container positions its pop-up */
.decade {
	position: relative;
	text-align: center;
}

/* Make the decade look like a clean, tappable label using your big type */
.decade-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: .25em .4em;
	width: 100%;
	line-height: 1.2;
}

/* Pop-up panel */
.decade-menu {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(100% + .25em);
	min-width: 14rem;
	background: #fff;
	border: 3px solid #10181E;
	/* your black */
	box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
	z-index: 20;
	display: none;
}

/* Open state */
.decade-menu.open {
	display: block;
}

/* Year links grid */
.decade-menu .years {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .25em .5em;
	padding: .6em .7em .8em;
}

/* Year links: reuse red link color on hover (you already define #mainbody a:hover) */
.decade-menu a {
	font: 200% arial, times;
	/* match .texttable/.text sizing vibe */
	color: #003DA5;
	/* body text black */
	text-decoration: none;
	padding: .1em .2em;
	border-radius: 4px;
	text-align: center;
}

.decade-menu a:hover {
	color: #003DA5;
	text-decoration: underline;
}

/* Mobile: stack decades nicely */
@media (max-width: 800px) {
	.decade-grid {
		grid-template-columns: repeat(2, 1fr);
		width: 90%;
	}
}

/* === Traditions accordion (looks like Sample, uses Traditions colors) === */
.acc__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .5rem .75rem;
}

.acc__title {
	margin: 0;
}

.acc__toggle {
	margin: 0 1rem 0 0;
	padding: .35rem 1.25rem;
	border: 3px solid #10181E;
	border-radius: 8px;
	background: #fff;
	color: #10181E;
	cursor: pointer;
	font-size: 150%;
	font-weight: bold;
}

.acc__toggle:hover {
	background: #003DA5;
	color: #fff;
}

.acc__panel {
	overflow: hidden;
	transition: height .28s ease;
	border-top: 3px solid #10181E;
	/* subtle divider when open */
	background: #fff;
}

.acc__panel[hidden] {
	display: block;
	height: 0;
}

/* Keep links and headings consistent inside the panel */
.acc__panel a {
	color: #003DA5;
	text-decoration: none;
}

.acc__panel a:hover {
	text-decoration: underline;
}

/* --- Force OPEN buttons to stay white (even on hover) --- */
/* When expanded (CLOSE state): blue button + blue hover */
.acc__toggle[aria-expanded="true"] {
	background: #003DA5;
	color: #fff;
}

.acc__toggle[aria-expanded="true"]:hover {
	background: #003DA5;
	color: #fff;
}

/* When collapsed (OPEN state): always white, even if hovered */
.acc__toggle[aria-expanded="false"],
.acc__toggle:not([aria-expanded="true"]) {
	background: #fff;
	color: #10181E;
}

.acc__toggle[aria-expanded="false"]:hover,
.acc__toggle:not([aria-expanded="true"]):hover {
	background: #fff;
	color: #10181E;
}

/*
Blue hex #003DA5,
Black hex #10181E,
Gray hex #C3C6C5 */

/* === BEGIN Responsive Enhancements (ChatGPT 2025-11-07)
Keeps desktop/iPad look, improves iPhone experience
================================================== */

/* Make sizing predictable */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Images scale within containers */
img {
	max-width: 100%;
	height: auto;
}

/* Menubar wraps only on small screens (moved into media query) */

/* Inline logo images inside .title */
.title img {
	height: auto;
	max-width: 12vw;
	min-width: 40px;
}

/* Forms: make inputs fill container more comfortably by default */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
	max-width: 100%;
}

/* Decade grid: reasonable default columns already defined later;
ensure it doesn't overflow small viewports */
.decade-menu {
	max-width: 92vw;
}

/* ---------------------------
Breakpoint: tablets/phones
--------------------------- */
@media screen and (max-width: 768px) {

	body {
		font-size: 90%;
	}

	.top,
	#top {
		margin: 1%;
		border-width: 3px;
	}

	.mainbody,
	#mainbody,
	#mainbodygray {
		margin: 1%;
		border-width: 3px;
	}

	.title {
		padding: 10px;
	}

	.title2 {
		padding: 10px 6px;
	}

	.title3 {
		font-size: 120%;
	}

	.bodyh1 {
		font-size: 180%;
	}

	.bodyh2 {
		font-size: 135%;
	}

	.bodyh2a {
		font-size: 150%;
	}

	.bodyh2b {
		font-size: 130%;
	}

	.bodyh3 {
		font-size: 125%;
	}

	.bodyh4 {
		font-size: 125%;
	}

	.heading1 {
		font-size: 135%;
	}

	.headingcolor,
	.headingcolorj {
		font-size: 150%;
		padding: .35em;
	}

	.text,
	.textright,
	.textcenter,
	.quote,
	.textindented,
	.textindented2,
	.texttable {
		font-size: 115%;
		padding-left: .6em;
		padding-right: .6em;
	}

	.center-table {
		width: 96%;
	}

	/* Stack any side-by-side panels */
	.container {
		display: block;
	}

	.left-panel,
	.right-panel {
		width: 100%;
		padding: 14px;
		border: 5px solid #10181E;
		border-radius: 15px;
	}

	/* Make menubar vertical-ish and hide pipe separators if present */
	.menubar {
		font-size: 120%;
		line-height: 1.4;
	}

	.menubar a {
		display: inline-block;
		margin: 4px 0;
	}

	.menubar .black {
		display: none;
	}

	/* Float-busting for images embedded in text blocks */
	.mainbody img,
	.bodyh2a img,
	#mainbody img,
	.text img:not(.logo-left):not(.logo-center) {
		float: none !important;
		margin: 10px auto !important;
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* EXCEPTION — logo stays small on phones */
	.text img.logo-left {
		width: 15% !important;
		height: auto !important;
		float: left !important;
	}

	.bodyh2a img.logo-center {
		width: 6% !important;
		height: auto !important;
	}

	/* Form controls fill the width nicely */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	textarea {
		width: 100% !important;
		font-size: 100%;
	}

	/* Buttons scale */
	button,
	.bodyh2 button,
	.bodyh2a button {
		font-size: 110%;
	}

	/* Class links decade grid: reduce columns */
	.decade-grid {
		width: 96%;
		grid-template-columns: repeat(2, 1fr);
		gap: .4em .6em;
	}

	/* Pop-up should not overflow; position below trigger */
	.decade-menu {
		left: 50%;
		transform: translateX(-50%);
		top: calc(100% + .4em);
		max-width: 96vw;
	}

	.decade-menu .years {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------
Extra small phones
--------------------------- */
@media screen and (max-width: 480px) {
	.menubar {
		font-size: 110%;
	}

	.decade-grid {
		grid-template-columns: 1fr;
	}

	.decade-menu .years {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Smooth responsive heading scaling */
.bodyh2a {
	font-size: clamp(1.4rem, 3vw, 2rem);
}